<template>
  <div class="datav_map">
    <div class="datav_map_img">
      <img src="./../../assets/img/index/datav_map_bj.png" alt />
    </div>
    <div class="datav_map_content">
      <div class="datav_part_title">
        <span>用户分布图</span>
        <p>
          <span v-for="(item,i) in user_rating_lists" :key="i">
            <span v-for="(it,key,n) in item" :key="it">
              {{key}}：
              <b style="color:#4affff;">{{it}}</b>
            </span>
          </span>
          
          <!-- <span>
            VIP：
            <b style="color:#25a6f4;">3276</b>
          </span>
          <span>
            代理：
            <b style="color:#28b1ff;">67%</b>
          </span> -->
        </p>
      </div>
      <div id="chart_map" style="width:100%;height:100%;"></div>
    </div>
  </div>
</template>
<script>
  require("./../../assets/js/china");
  export default {
    name: "datav_map",
    data() {
      return {};
    },
    props: {
      user_lists: {
        type: Array,
        default: () => {
          []
        }
      },
      user_rating_lists: {
        type: Array,
        default: () => {
          []
        }
      }
    },
    components: {},
    mounted() {
      var that = this;
      this.$nextTick(() => {
        that.echart_map();
      });
    },
    methods: {
      echart_map() {
        // console.log("iiiiiiiiiiiiiiii:",this.user_lists)
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById("chart_map"));
        var that = this;
        /*获取地图数据*/
        myChart.showLoading();
        myChart.hideLoading();

        var gzData = []; //地区信息
        var address = {};
        for (let i = 0; i < this.user_lists.length; i++) {
          var gz = [];
          var value1 = {
            name: "长沙"
          };
          var value2 = {
            name: this.user_lists[i].province,
            value: this.user_lists[i].number
          };
          gz.push(value1);
          gz.push(value2);
          gzData.push(gz);

          // 各省经纬度
          var jwd = [];
          jwd.push(this.user_lists[i].lng);
          jwd.push(this.user_lists[i].lat);
          this.$set(address, this.user_lists[i].province, jwd);
          // console.log("8888888888888888888:", address)
        }
        
        gzData.reverse();     //省份分布排行   数组颠倒
        var geoCoordMap = address;  // 各省份经纬度 
        // var geoCoordMap = {
        //   福州: [119.4543, 25.9222],
        //   长春: [125.8154, 44.2584],
        //   重庆: [107.7539, 30.1904],
        //   西安: [109.1162, 34.2004],
        //   成都: [103.9526, 30.7617],
        //   常州: [119.4543, 31.5582],
        //   北京: [116.4551, 40.2539],
        //   北海: [109.314, 21.6211],
        //   海口: [110.3893, 19.8516],
        //   长沙: [113.019455, 28.200103],
        //   上海: [121.4, 31.73],
        //   内蒙古: [106.82, 39.67]
        // };

        var GZData = gzData;

        var color = ["#33bae4"];
        var series = [];
        [
          ["福州", GZData]
        ].forEach(function(item, i) {
          series.push({
            name: item[0],
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 1,
            rippleEffect: {
              period: 5,
              scale: 7,
              brushType: "stroke"
            },
            label: {
              normal: {
                show: true,
                position: "right",
                formatter: "{b}"
              }
            },
            symbolSize: function(val) {
              return val[2] / 8;
            },
            itemStyle: {
              normal: {
                color: color[i]
              },
              nameTextStyle: {
                color: "#ffffff"
              }
            },
            data: item[1].map(function(dataItem) {
              return {
                name: dataItem[1].name,
                value: geoCoordMap[dataItem[1].name].concat(80)
              };
            })
          });
        });
        [
          ["福州", GZData]
        ].forEach(function(item, i) {
          series.push({
            id: "bar",
            zoom: 0.6,
            zlevel: 2,
            type: "bar",
            symbol: "none",

            itemStyle: {
              normal: {
                label: {
                  show: true,
                  textStyle: {
                    fontSize: "12",
                    color: "#fff"
                  }
                },
                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "#00FFE3"
                  },
                  {
                    offset: 1,
                    color: "#4693EC"
                  }
                ])
              }
            },

            label: {
              show: true,
              position: "right"
            },
            data: item[1].map(function(dataItem) {
              return dataItem[1];
            })
          });
        });

        var option = {
          title: [{
            id: "statistic",
            text: "省份分布排行",
            right: 85,
            top: 60,
            width: 100,
            textStyle: {
              color: "#fff",
              fontSize: 14
            }
          }],

          grid: {
            right: 0,
            top: 100,
            bottom: 40,
            width: "20%"
          },
          xAxis: {
            type: "value",
            scale: true,
            position: "top",
            boundaryGap: false,
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false,
              margin: 2,
              textStyle: {
                color: "#aaa"
              }
            }
          },
          yAxis: {
            type: "category",
            nameGap: 16,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#ddd"
              }
            },
            axisTick: {
              show: false,
              lineStyle: {
                color: "#ddd"
              }
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#ddd"
              }
            },
            data: GZData.map(function(dataItem) {
              return dataItem[1].name;
            })
          },

          tooltip: {
            trigger: "item"
          },
          geo: {
            map: "china",
            label: {
              emphasis: {
                show: false
              }
            },
            zoom: 1.2,
            center: [115.98561551896913, 36.20500049089619],
            roam: true,
            itemStyle: {
              normal: {
                //          	color: '#ddd',
                borderColor: "rgba(147, 235, 248, 1)",
                borderWidth: 1,
                areaColor: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [{
                      offset: 0,
                      color: "rgba(175,238,238, 0)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(	47,79,79, .1)" // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                },
                shadowColor: "rgba(128, 217, 248, 1)",
                // shadowColor: 'rgba(255, 255, 255, 1)',
                shadowOffsetX: -2,
                shadowOffsetY: 2,
                shadowBlur: 10
              },
              emphasis: {
                areaColor: "#389BB7",
                borderWidth: 0
              }
            },
            data: [{
              name: "南海诸岛", //隐藏海南岛
              itemStyle: {
                normal: {
                  opacity: 0,
                  label: {
                    show: false
                  },
                  borderWidth: "0",
                  borderColor: "#10242b",
                  areaStyle: {
                    color: "#10242b"
                  }
                },
                emphasis: {
                  opacity: 0,
                  label: {
                    show: false
                  }
                }
              }
            }]
          },
          series: series
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function() {
          myChart.resize();
        });
      }
    }
  };
</script>
<style lang="less" scoped>
  .datav_map {
    width: 100%;
    position: relative;

    .datav_map_img {
      width: 100%;

      img {
        // width: 100%;
        height: 100%;
      }
    }

    .datav_map_content {
      width: 100%;
      padding: 10px 20px 20px 20px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-flow: column;

      .datav_part_title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        >p {
          width: 75%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          @media only screen and (min-width: 1680px) and (max-width: 1920px) {
            span {
              font-size: 16px;
            }
          }

          @media only screen and (min-width: 1440px) and (max-width: 1680px) {
            span {
              font-size: 16px;
            }
          }

          @media only screen and (min-width: 1024px) and (max-width: 1440px) {
            width: 70%;

            span {
              font-size: 12px;
            }
          }

          @media only screen and (max-width: 1024px) {
            span {
              font-size: 10px;
            }
          }
        }
      }

      .datav_map_body {
        width: 100%;
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        padding-top: 20px;
      }
    }
  }
</style>
